<template>
  <div>
    <DecorativeTitle text="急救站数据概览" />
    <div id="HospitalAdmissionRanking">
      <div class="bg-color-black">
        <div class="d-flex jc-center body-box">
          <dv-scroll-board class="dv-scr-board" :config="config" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/bus";
import { getUnitCalItemsWithNoAuthorization } from "@/api/UnitCalculate";
import DecorativeTitle from "_c/DecorativeTitle.vue";
import config from "@/config";
import {getLast24HoursRange} from "@/utils/dateUtil";

export default {
  components: {DecorativeTitle},
  data() {
    return {
      config: {
        header: ['急救站', '出车数', '救治患者人数'],
        data: [],
        rowNum: 6, //表格行数
        headerHeight: 40,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: false,
        columnWidth: [300, 120, 120],
        align: ['center', 'center', 'center']
      },
      standardData: {
        beginDateTime: '',
        endDateTime: '',
        columnsData: [
          {
            columnHeadType: 1,
            commGroupInfo: { isCommonGroup: true, category: 'AOISZFZ', categoryGroup: 'AOISZFZ_1' },
            dataIndex: 'FZ'
          },
          {
            columnHeadType: 1,
            calculateIden: { title: '出车数' },
            calculateInfo: { offset: 0, dataCategory: 0, valueCategory: 0, count: true, differenceCount: false, proportion: false },
            dataIndex: 'CCS'
          },
          {
            columnHeadType: 1,
            calculateIden: { title: '病人数(其它厂商)' },
            calculateInfo: { offset: 0, dataCategory: 0, valueCategory: 0, count: true, differenceCount: false, proportion: false },
            dataIndex: 'BRS'
          }
        ],
        verticalGroups: [
          { category: 'AOISZFZ', categoryGroup: 'AOISZFZ_1', level: 1, title: '出诊单位' }
        ],
        screens: [
          {
            ref: 'EPAIAREA_CODE',
            checkIden: 'EPAIAREA_CODE_1',
            rlevantData: {
              iden: 'EPAIAREA_CODE_1',
              filterType: 2,
              value: [
                {
                  value: config.xzbm,
                  xzbm: config.xzbm
                }
              ]
            }
          }
        ]
      }
    }
  },
  async created() {
    this.fetchData()
    // 监听全局刷新事件
    this.refreshHandler = () => {
      console.log("定时刷新：EmergencyStationsOverview")
      this.fetchData();
    }
    bus.$on('refresh-all-data', this.refreshHandler)
  },
  methods: {
    async fetchData() {
      const { beginDateTime, endDateTime } = getLast24HoursRange();
      this.standardData.beginDateTime = beginDateTime;
      this.standardData.endDateTime = endDateTime;
      const res = await getUnitCalItemsWithNoAuthorization(this.standardData);
      if (res.code === 200 && res.isSuccess) {
        try {
          const entityList = JSON.parse(res.entity);
          if (entityList && entityList.length > 0) {
            // 筛除合计项
            const itemList = entityList.filter(item => item.FZ !== '合计' && item.FZ);
            this.config = {
              ...this.config,
              data: itemList.map(item => [
                item.FZ || '-',
                `<span class='colorGrass'>${item.CCS || 0}</span>`,
                `<span class='colorGrass'>${item.BRS || 0}</span>`
              ])
            };
          } else {
            this.config = {
              ...this.config,
              data: []
            };
          }
        } catch (e) {
          console.error('entity 解析失败', e);
        }
      }
    }
  },
  beforeDestroy() {
    bus.$off('refresh-all-data', this.refreshHandler)
  }
};
</script>

<style lang="scss" scoped>
$box-height: 290px;
$box-width: 100%;
#HospitalAdmissionRanking {
  padding: 5px 0px 0px 25px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height;
    border-radius: 10px;
  }
  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    font-size: 16px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 280px;
    }
  }
}
</style>
